<template>
  <div id="container" class="h-full"></div>
</template>

<script lang="ts" setup>
import * as Cesium from 'cesium'

onMounted(() => {
  const viewer = new Cesium.Viewer('container', {
    homeButton: false, //首页组件
    geocoder: false, //地理编码搜索组件
    navigationHelpButton: false,//帮助按钮
    timeline: false, //时间轴
    animation: false, //动画小部件
    fullscreenButton: false, //全屏组件
    sceneModePicker: false, //场景模式
    sceneMode: Cesium.SceneMode.SCENE2D, // 初始场景
    baseLayerPicker: false, //地图图层组件
    baseLayer: false, // 关闭内置访问
  })
  viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    url: `${import.meta.env.VITE_BASE_URL}/project-source/gis/tms01_0_7/{z}/{x}/{reverseY}.jpg`,
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileWidth: 256,
    tileHeight: 256,
    minimumLevel: 0,
    maximumLevel: 7
  }))

  // 相机
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(110, 20, 5000000),
    orientation: {
      heading: Cesium.Math.toRadians(0), // 摇头
      pitch: Cesium.Math.toRadians(-90), // 点头
      roll: Cesium.Math.toRadians(0), // 歪头
    }
  })

  // 飞行线
  // viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(110, 20, 5000000),
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0), // 摇头
  //     pitch: Cesium.Math.toRadians(-80), // 点头
  //     roll: Cesium.Math.toRadians(0), // 歪头
  //   },
  //   duration: 3,
  // })

  // 锁定视角
  // viewer.camera.lookAt(
  //   Cesium.Cartesian3.fromDegrees(110, 20, 1000000), 
  //   new Cesium.HeadingPitchRange(
  //     Cesium.Math.toRadians(0),
  //     Cesium.Math.toRadians(-90),
  //     20000
  //   )
  // )

  // 点
  // const point = new Cesium.Entity({
  //   position: Cesium.Cartesian3.fromDegrees(110, 20),
  //   point: {
  //     pixelSize: 20, // 点像素大小
  //     color: Cesium.Color.BLUE
  //   }
  // })
  // viewer.entities.add(point)
  // viewer.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(110, 20),
  //   point: {
  //     pixelSize: 4, // 点像素大小
  //     color: new Cesium.Color(255, 155, 34)
  //   }
  // })
})
</script>

<style lang="scss" scoped>

:deep(.cesium-viewer-bottom) {
  display: none;
}
</style>
